<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Title</title>

    <style type="text/css">
        .important {
            font-weight: bold;
            font-size: xx-large;
            background-color: #e5eecc;
        }

        .blue {
            color: blue;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn_1").click(function () {
                $("h1").addClass("important");
                // $("h1").addClass(function (i, oldr) {
                //     console.log("index:"+i+",oldr="+oldr);
                //     return "important";
                // })
            })
            $("#btn_2").click(function () {
                $("h2").addClass("important blue");
            })
            $("#btn_3").click(function () {
                $("h1").removeClass("important");
            })
            $("#btn_4").click(function () {
                $("h2").removeClass("important blue");
            })
            $("#btn_5").click(function () {
                $("p").toggleClass("important blue");
            })
        })
    </script>
</head>
<body>
<h1>这是一个生气的故事h1</h1>
<h2>这是一个奇怪的世界h2</h2>
<p>什么都不是，就是这个p</p>

<input id="btn_1" type="button" value="添加一个"><br/><br/>
<input id="btn_2" type="button" value="添加两个"><br/><br/>
<input id="btn_3" type="button" value="移除一个"><br/><br/>
<input id="btn_4" type="button" value="移除两个"><br/><br/>
<input id="btn_5" type="button" value="toggle切换操作">

</body>
</html>